@import 'commons.less';

tui\:files {
	display: block;

	@size: 80px;

	&>div.tui-files-upload-box,&>div.tui-files-item {
		display: inline-block;
		position: relative;
		width: @size;
		height: @size;
		line-height: 70px;
		text-align: center;
		margin: 8px;
		vertical-align: middle;
	}
	&>div.tui-files-upload-box {
		border: 1px dashed #ccc;
		line-height: @size;
		.icon-base();
		color: #ccc;
		font-size: 24px;
		&:before {
			.fa-plus;
		}
		&.tui-files-big-label {
			width: 60px;
			height: 60px;
			line-height: 60px;
			padding: 5px;
		}
	}

	&>div.tui-files-item {
		position: relative;
		font-size: 40px;
		border: 1px solid #ccc;
		&>div {
			position: absolute;
			left:0;
			right: 0;
			bottom: 0;
			height: 20px;
			font-size: 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 20px;
			background-color: #e4e4e4;
			color: #333;
			white-space: nowrap;
			padding:0 5px;
			cursor: default;
			opacity: 0.9;
		}
		&>img {
			display: inline-block;
			max-width: @size;
			max-height: @size;
			vertical-align: middle;
		}
		&>span.tui-files-remove-icon {
			display: block;
			position: absolute;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			right: -10px;
			top: -10px;
			background: #424242;
			color: white;
			font-size: 12px;
			cursor: default;
			//border:1px solid #ccc;
			.border-radius(10px);
			.shadow(1px, 1px, 2px);
			.icon-base();
			&:before {
				.fa-times();
			}
		}
		&.tui-files-big-label {
			padding: 5px 10px;
			white-space: nowrap;
			width: auto;
			height: 60px;
			line-height: 60px;
			&:before {
				line-height: 60px;
			}
			>div {
				position: static;
				display: inline-block;
				height: auto;
				max-height: 56px;
				max-width: 230px;
				line-height: 14px;
				color: #555;
				background-color: transparent;
				white-space: normal;
				vertical-align: middle;
				text-align: left;
				opacity: 1;
				word-wrap: break-word;
			}
			>img {
				width: 40px;
				height: 40px;
			}
		}
		.icon-base();
		&:before {
			vertical-align: middle;
			line-height: 40px;
		}
		&.file-type-image:before {
			.fa-file-image-o;
			color: #777;
		}
		&.file-type-word:before {
			.fa-file-word-o;
			color: #48c;
		}
		&.file-type-excel:before {
			.fa-file-excel-o;
			color: #2b6;
		}
		&.file-type-ppt:before {
			.fa-file-powerpoint-o;
			color: #f57c0d;
		}
		&.file-type-txt:before {
			.fa-file-text-o;
			color: #777;
		}
		&.file-type-pdf:before {
			.fa-file-pdf-o;
			color: #dd2c00;
		}
		&.file-type-unknow:before {
			.fa-file-o;
			color: #777;
		}
	}
}
